<!DOCTYPE html>
<html>
    <head>
        <title>button demo 1</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/>
        <script src="../../avalon.js"></script>
        <script src="../style/highlight/shCore.js"></script>

        <script>
            avalon.library("aoyou", {
                $ready: function () {
                    avalon.log("控件已经构建完毕")
                }
            })
            require(["./component/button/avalon.button"], function () {
                avalon.define({
                    $id: "demo"
                })
                avalon.scan()
            })
        </script>
        <style>
            body {
                padding-bottom: 200px;
            }
            fieldset > div {
                margin-bottom: 20px;
            }
            .inline {
                display: inline-block;
            }
        </style>
    </head>
    <body ms-controller="demo">
        <fieldset>
            <legend>button type and iconPosition 、 icon 、corner、label config</legend>
            <div>
                <aoyou:button>input元素</aoyou:button>
                <aoyou:button type="icon" icon-position="left">button元素</aoyou:button>
                <aoyou:button type="icon" icon-position="left-right">button元素</aoyou:button>
                <aoyou:button type="labeledIcon" icon-position="left">a元素</aoyou:button>
                <aoyou:button type="labeledIcon" icon-position="right">div元素</aoyou:button>
                <aoyou:button type="labeledIcon" icon-position="left-right">a元素</aoyou:button>
            </div>
            <div>

                <aoyou:button corner="4">input元素</aoyou:button>
                <aoyou:button type="icon" icon-position="left" corner="4">button元素</aoyou:button>
                <aoyou:button type="icon" icon-position="left-right" corner="4">button元素</aoyou:button>
                <aoyou:button type="labeledIcon" icon-position="left" corner="4">a元素</aoyou:button>
                <aoyou:button type="labeledIcon" icon-position="right" corner="4" label="icon right">div元素</aoyou:button>
                <aoyou:button type="labeledIcon" icon-position="left-right" corner="4">a元素</aoyou:button>
            </div>
        </fieldset>        
    </body>
</html>
